.monitor-screen {
	z-index: 999;
	display: flex;
	flex-direction: column;
	font-family: HarmonyOSSC;
	background-color: #000127;
	background-repeat: no-repeat;
	.monitor-screen-title {
		display: flex;
		height: 60px;
		padding: 20px 25px 0 30px;
		color: #ffffff;
		background-image: url("@/assets/images/monitor/head.png");
		background-size: 100% 100%;
		.title-time {
			// display: flex;
			display: flex;
			font-size: 16px;
			& > span:nth-child(1) {
				font-weight: bold;
			}

			// & > span:nth-child(2) {
			// 	margin-right: 20px;
			// }
			& > span:nth-child(2) {
				margin-left: 20px;
				font-weight: bold;
			}
		}
		.label {
			font-size: 30px;
			text-align: center;
		}
		.btn {
			width: 140px;
			height: 30px;
			font-weight: bold;
			line-height: 30px;
			text-align: center;
			background-image: url("@/assets/images/monitor/btn.png");
			background-size: 100% 100%;
		}
		.btn:hover {
			cursor: pointer;
			opacity: 0.9;
		}
	}
	.monitor-screen-content {
		display: flex;
		flex: 1;
		margin: 20px 40px;
		overflow: hidden;
		.monitor-screen-left {
			display: flex;
			flex-direction: column;
			width: 25%;
			height: 100%;

			// border: 1px solid red;
			.device-run-content {
				display: flex;
				justify-content: space-between;
				width: calc(100% - 32px);
				padding: 25px 16px;
				.device-run-content-item {
					flex: 1;
					padding-left: 12px;
					& + .device-run-content-item {
						margin-left: 22px;
					}
					& > div:nth-child(1) {
						font-family: HarmonyOSSC;
						font-size: 14px;
						font-weight: 400;
						color: #e6e8f2;
					}
					& > div:nth-child(2) {
						margin: 15px 0;
						font-family: HarmonyOSBold;
						font-size: 20px;
						font-weight: 600;
						cursor: pointer;
					}
				}
			}
			.data-acquisition {
				margin-top: 30px;
				.data-acquisition-content {
					width: 100%;
					height: 300px;
				}
			}
			.new-acquisition {
				flex: 1;
				margin-top: 30px;
				overflow: hidden;
			}
		}
		.monitor-screen-middle {
			display: flex;
			flex: 1;
			flex-direction: column;
			margin: 0 20px;
			overflow: hidden;
			.Instrument {
				display: flex;
				height: 100px;
				margin: 20px 0;
				color: #ffffff;
				background-image: url("@/assets/images/monitor/top-param.png");
				background-size: 100% 100%;
				.el-image {
					width: 60px;
					height: 60px;
					margin: auto 10px;
				}
			}
			.map-box {
				position: relative;
				height: 60%;
				padding: 40px 20px;
				margin-bottom: 30px;
				color: #ffffff;
				background-color: #021113;
				border: 1px solid #7a82aa;
				.el-image {
					height: 100%;
				}
				.dev-card {
					min-width: 150px;
					height: 45%;
					margin: 5% 10%;
					border: 1px solid #16eeba;
					.text {
						display: flex;
						justify-content: center;
						width: 100%;
					}
				}
				.param {
					padding: 20px 30px;
					line-height: 30px;
					.value {
						background-color: #cccccc;
					}
				}
			}
			.bottom-table {
				display: flex;
				flex-wrap: wrap-reverse;
				justify-content: center;
				height: 100px;
				margin: 0 20px;
				color: #ffffff;
				background-image: url("@/assets/images/monitor/bottom-btn.png");
				background-size: 100% 100%;
				.btn {
					width: 60px;
					height: 30px;
					margin: 10px;
					line-height: 30px;
					text-align: center;
					background-image: url("@/assets/images/monitor/btn1.png");
					background-size: 100% 100%;
				}
			}
		}
		.monitor-screen-right {
			display: flex;
			flex-direction: column;
			width: 25%;
			height: 100%;
			.alarm-count-rank {
				height: 30vh;
				.alarm-count-rank-content {
					margin-top: 20px;
					font-size: 14px;
					font-weight: 400;
					color: #ffffff;
					background-image: url("@/assets/images/monitor/item-bg.png");
					.count-rank-item {
						display: flex;
						align-items: center;
						height: 42px;
						padding: 0 20px;
					}
				}
			}
			.alarm-stat {
				height: 30vh;
				margin-top: 30px;
				.alarm-count-rank-content {
					margin-top: 20px;
					font-size: 14px;
					font-weight: 400;
					color: #ffffff;
					background-image: url("@/assets/images/monitor/item-bg.png");
					.count-rank-item {
						display: flex;
						align-items: center;
						height: 42px;
						padding: 0 20px;
					}
				}
			}
			.videx-box {
				flex: 1;
				margin-top: 30px;
				.video {
					width: 100%;
					height: 20vh;
					margin-top: 20px;
					background-color: #000000;
				}
			}
		}
		.new-acquisition-content {
			height: calc(100% - 54px);
			margin-top: 20px;
			.table-title {
				display: flex;
				align-items: center;
				height: 30px;
				padding: 0 20px;
				font-size: 14px;
				font-weight: 400;
				color: #c9b38a;
				background-color: #222846;
			}
			.table-content {
				height: calc(100% - 30px);
				overflow-y: auto;
				.table-content-item {
					display: flex;
					align-items: center;
					padding: 0 20px;
					font-size: 14px;
					font-weight: 400;
					color: #ffffff;
					background-image: url("@/assets/images/monitor/item-bg.png");
					& > div {
						overflow: hidden;
						line-height: 42px;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}
		}
	}
	.alarm-status-tag {
		width: 54px;
		height: 24px;
		margin-left: 5px;
		font-family: HarmonyOSSC;
		font-size: 14px;
		font-weight: 500;
		line-height: 24px !important;
		color: #ffffff;
		text-align: center;
		background: url(../../../assets/images//monitor/8.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		&.type-s2 {
			background: url(../../../assets/images//monitor/9.png);
		}
		&.type-s3 {
			background: url(../../../assets/images//monitor/10.png);
		}
	}
	.BMapLabel {
		background-color: transparent !important;
		border: none !important;
		.map-label-position {
			// position: absolute;
			top: 100px;
			right: 0;
			left: 0;
			width: 25px;
			height: 25px;
			margin: 0 auto;
		}
		@keyframes opac {
			from {
				top: 50%;
				left: 50%;
				width: 0;
				height: 0;
				opacity: 1;
			}
			to {
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				opacity: 0;
			}
		}
		.map-label-position::before {
			position: absolute;
			top: 50%;
			left: 50%;
			content: "";
			background: #fc2a2a;
			border-radius: 50%;
			animation: opac 2s infinite;
		}
		.map-label-position .w1 {
			position: absolute;
			top: calc(50% - 5px);
			left: calc(50% - 5px);
			width: 10px;
			height: 10px;
			background-color: #fc2a2a;
			border-radius: 50%;
		}
		.map-label-position.online {
			&::before {
				background: #16eeba;
			}
			.w1 {
				background-color: #16eeba;
			}
		}
		.map-label-text {
			min-width: 100px;
			padding: 0 10px;
			font-family: HarmonyOSBold;
			font-size: 16px;
			font-weight: 700;
			line-height: 46px;
			color: #ffffff;
			text-align: center;
			text-shadow: 0 3px 6px #031124;
			cursor: pointer;
			background: url(../../../assets/images//monitor/21.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			&.offline {
				background: url(../../../assets/images//monitor/22.png);
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}
		}
		.map-window {
			position: relative;
			width: 480px;
			height: 300px;
			font-family: HarmonyOSSC;
			font-size: 14px;
			font-weight: 400;
			color: #ffffff;
			background: url(../../../assets/images//monitor/28.png);
			background-color: #171c35;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			.map-window-title {
				position: relative;
				padding-left: 34px;
				overflow: hidden;
				font-family: HarmonyOSBold;
				font-size: 16px;
				font-weight: 700;
				line-height: 45px;
				text-overflow: ellipsis;
				white-space: nowrap;

				// display: flex;
				// justify-content: space-between;
				// padding-right: 20px;
				// &::before {
				// 	content: "";
				// 	height: 6px;
				// 	width: 6px;
				// 	border-radius: 50px;
				// 	background-color: #f9ba0b;
				// 	position: absolute;
				// 	top: 0px;
				// 	left: 18px;
				// }
				// & > span {
				// 	font-size: 15px;
				// 	color: #5e7ce0;
				// 	cursor: pointer;
				// }
			}
			.moreInfo {
				display: flex;
				padding-left: 0 !important;
				font-size: 15px;
				color: #5e7ce0;
				cursor: pointer;
				border: none !important;
				& > .iconfont {
					margin-right: 3px;
				}
			}
			.map-window-close {
				position: absolute;
				top: 0;
				right: 0;
				z-index: 9;
				width: 16px;
				height: 16px;
				cursor: pointer;
				background: url(../../../assets/images//monitor/29.png);
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}
			.mp-l {
				display: flex;
				align-items: center;
				margin: 0 18px;
				margin-top: 12px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				& > img {
					margin-right: 12px;
				}
			}
			.mp-t {
				display: flex;
				flex-wrap: wrap;
				margin: 0 18px;
				& > div {
					width: calc(50% - 23px);
					padding-left: 12px;
					margin-top: 12px;
					line-height: 30px;
					border: 1px solid #595f78;
					&:nth-child(2n) {
						margin-left: 16px;
					}
				}
			}
		}
	}
	.not-data {
		margin-top: 25px;
		font-size: 15px;
		color: #ffffff;
		text-align: center;
	}
	.dot {
		width: 18px;
		height: 18px;
		cursor: pointer;
		background-color: #cccccc;
		border-radius: 10px;
	}
}
